<template>
  <div class="basic-page overflow-auto">
    <el-page-header @back="$router.back">
      <template #content>
        <span>用户详情</span>
      </template>
    </el-page-header>

    <div
      class="section"
      :class="activeTab === 'login_info' && 'login_info_section'"
    >
      <div class="tabs-wrap flex justify-between items-end">
        <el-tabs v-model="activeTab" class="basic-tabs">
          <el-tab-pane label="用户信息" name="user_info"></el-tab-pane>
          <el-tab-pane label="登录记录" name="login_info"></el-tab-pane>
        </el-tabs>
        <div class="actions pr-4">
          <el-button type="primary" @click="openEditUserDialog">
            编辑账号
          </el-button>
          <el-button @click="handleResetUserPassword(userInfo)">
            重置密码
          </el-button>
        </div>
      </div>
      <div v-if="activeTab === 'user_info'" class="info-wrap">
        <div class="info-wrap__title">登录信息</div>
        <div class="info-wrap__body">
          <el-avatar :size="48">
            <img src="@/assets/modules/auth/avatar.webp" alt="avatar" />
          </el-avatar>
          <label-info
            label="最后登录时间"
            :value="formatUnix(+userInfo.login_at!)"
          ></label-info>
          <label-info
            label="最后一次登录IP"
            :value="userInfo.login_ip"
          ></label-info>
          <label-info
            label="登录IP所在地"
            :value="userInfo.login_addr"
          ></label-info>
          <label-info
            label="系统版本"
            :value="userInfo.login_system_info"
          ></label-info>
          <label-info
            label="浏览器版本"
            :value="userInfo.login_browser_info"
          ></label-info>
          <label-info
            label="登录次数"
            :value="userInfo.login_count"
          ></label-info>
        </div>
      </div>

      <login-record v-else class="flex-1" :user="userInfo"></login-record>
    </div>

    <div v-if="activeTab === 'user_info'" class="section">
      <div
        class="info-wrap border-0 border-b-[1px] border-dashed border-[#EDEEF0]"
      >
        <div class="info-wrap__title">基本信息</div>
        <div class="info-wrap__body">
          <label-info
            label="更新时间"
            class="flex-initial w-[135px]"
            :value="formatUnix(userInfo.updated_at as unknown as number)"
          ></label-info>
          <label-info label="用户ID" :value="userInfo.uid"></label-info>
          <label-info label="账号" :value="userInfo.username"></label-info>
          <label-info label="邮箱" :value="userInfo.email"></label-info>
          <label-info
            label="用户分组"
            :value="userInfo.group_name"
          ></label-info>
          <label-info label="域名数" :value="userInfo.domain_num"></label-info>
          <label-info label="DNS服务器地址" class="w-[160px] flex-initial">
            <div class="mt-2 flex">
              <div class="mr-2">
                <template v-if="userDnsList.length">
                  <div v-for="(item, index) in userDnsList" :key="index">
                    <text-ell :content="item" />
                  </div>
                </template>
                <template v-else>-</template>
              </div>
              <el-icon
                class="cursor-pointer mt-[3px]"
                color="#164CFF"
                size="16"
                @click="openEditDnsDialog(userInfo)"
              >
                <Edit />
              </el-icon>
            </div>
          </label-info>
          <label-info label="备注" class="max-w-[125px]">
            <BasicEditTableRemark
              :content="userInfo.remark!"
              :submit="value => handleEditRemark(userInfo, value)"
            />
          </label-info>
          <label-info label="对外接口">
            <basic-switch
              :model-value="userInfo.api_status"
              class="mt-1.5"
              @click="handleEditApiStatus(userInfo)"
            ></basic-switch>
          </label-info>
          <label-info label="状态">
            <basic-switch
              :model-value="userInfo.status"
              class="mt-1.5"
              @click="handleEditStatus(userInfo)"
            ></basic-switch>
          </label-info>
        </div>
      </div>
      <div class="info-wrap">
        <div class="info-wrap__title">注册信息</div>
        <div class="info-wrap__body">
          <label-info
            label="注册/创建时间"
            :value="formatUnix(userInfo.created_at as unknown as number)"
          ></label-info>
          <label-info label="注册IP" :value="userInfo.register_ip"></label-info>
          <label-info
            label="注册IP所在地"
            :value="userInfo.register_addr"
          ></label-info>
          <label-info
            label="浏览器版本"
            :value="userInfo.register_browser_info"
          ></label-info>
          <label-info
            label="系统版本"
            :value="userInfo.register_system_info"
          ></label-info>
        </div>
      </div>
    </div>
  </div>

  <edit-user-dialog
    v-model:visible="editUser.visible"
    v-model:loading="editUser.loading"
    :record="editUser.record"
    @reload="getData"
  ></edit-user-dialog>

  <edit-dns-dialog
    v-model:visible="editDns.visible"
    v-model:loading="editDns.loading"
    :record="editDns.record"
    :save-method="handleEditDnsServer"
    @reload="getData()"
  ></edit-dns-dialog>
  <ResetPasswordDialog
    v-model:visible="resetPasswordState.visible"
    :record="resetPasswordState.record"
    @reload="getData()"
  />
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'

import type { UserModel } from '@/apis/model/user'
import { E_YN } from '@/config/enums/base'
import { formatUnix } from '@/utils'

import EditUserDialog from '../dialogs/EditUserDialog.vue'
import ResetPasswordDialog from '../dialogs/ResetPasswordDialog.vue'
import useUserAction from '../hooks/useUserAction'
import LabelInfo from './components/LabelInfo.vue'
import LoginRecord from './components/LoginRecord.vue'

const route = useRoute()

type TabType = 'user_info' | 'login_info'
const activeTab = ref<TabType>('user_info')
/**
 * 用户数据
 */
const userInfo = ref<UserModel>({
  domain_num: '0',
  status: E_YN.N,
  api_status: E_YN.N
})

const userDnsList = computed<[string, string]>(() => {
  if (userInfo.value.assign_ns_list) {
    const [ns1, ns2] = userInfo.value.assign_ns_list
    return [ns1.addr as string, ns2.addr as string]
  }
  return ['-', '-']
})
const getData = async () => {
  userInfoApi({ id: route.params.id as string }).then(res => {
    userInfo.value = res
  })
}

const handleEditRemark = async (row: UserModel, remark: string) => {
  await putUserApi({ id: row.id as string, remark })
  getData()
  ToastUtils.success('修改成功')
}

onMounted(getData)

/**
 * 修改dns服务器地址
 */
const editDns = reactive<CommonDialog<{ id: string; dns: [string, string] }>>({
  visible: false,
  loading: false,
  record: undefined
})

const resetPasswordState = reactive<CommonDialog>({
  visible: false,
  record: undefined
})

const handleResetUserPassword = (row: UserModel) => {
  resetPasswordState.visible = true
  resetPasswordState.record = row
}

const openEditDnsDialog = (user: UserModel) => {
  if (user.assign_ns_list) {
    editDns.record = {
      id: user.id as string,
      dns: [
        user.assign_ns_list[0].id as string,
        user.assign_ns_list[1].id as string
      ]
    }
  }

  editDns.visible = true
}

/**
 * 修改dns
 */
const handleEditDnsServer = async (id: string, dns: [string, string]) => {
  await putUserDnsApi({
    id,
    ns_id_list: dns
  })
}

/**
 * 用户相关操作
 */
const { handleEditStatus, handleEditApiStatus } = useUserAction(getData)

/**
 * 编辑用户
 */
const editUser = reactive<CommonDialog<UserModel | null>>({
  visible: false,
  loading: false,
  record: null
})
const openEditUserDialog = () => {
  editUser.record = userInfo as UserModel
  editUser.visible = true
}
</script>

<style scoped lang="scss">
.section {
  @apply rounded-md bg-white mt-4 shadow-sm;
  .tabs-wrap {
    @apply pb-3;
    border-bottom: 1px solid #eee;
  }
  .info-wrap {
    @apply py-8 px-4;
    &__title {
      @apply text-[14px] font-bold text-[#161A23];
    }
    &__body {
      @apply mt-4 flex flex-wrap gap-x-8 items-center;
      .label-info {
        @apply flex-1;
      }
    }
  }
}
.login_info_section {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
